<script setup>
import { ref } from 'vue'

//1.声明图片路径数组
  const imgList = [
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
  ]

  //2.声明响应式下标，初始值为0
  const index=ref(0)
</script>


<template>
  <div>
    <button @click="index--" v-if="index>=1"> 上一页 </button>
  </div>

  <img :src="imgList[index]" alt="img"/>

  <div>
    <button @click="index++" v-if="index<imgList.length-1"> 下一页 </button>
  </div>

</template>


<style>
#app{
  display:flex;
  width:500px;
  height:240px;
}

img{
  width:240px;
  height:240px;
}
#app div{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
</style>